import { useSelector, useDispatch } from "react-redux"

export default (props) => {
  // let obj = useSelector(function (state) {
  //   console.log("组件中获取仓库中的状态：", state);
  //   // state.app得到app这个子store
  //   return state.app
  // })

  // let { size } = useSelector(function (state) {
  //   console.log("组件中获取仓库中的状态：", state);
  //   return state.app
  // })

  // 得到app这个子store中的size状态
  const { size } = useSelector(state => state.app)
  const dispatch = useDispatch();


  const sizeAdd = () => {
    // dispatch一个action
    // action是一个对象，{type:"APP_SIZE_ADD",payload:1}
    dispatch({ type: "APP_SIZE_ADD", payload: 10 })
  }

  const sizeSub = () => {
    dispatch({ type: "APP_SIZE_SUB", payload: 10 })
  }

  return (
    <div>
      <h2>商品列表</h2>
      <h2>{size}</h2>
      <button onClick={sizeAdd}>size++</button>
      <button onClick={sizeSub}>size--</button>
    </div>
  )
}